<template>
  <div class="box">
    <v-toolbar flat color="#42A5F5" style="height: 7.5vh; color: white">
      <v-btn depressed class="back" color="#42A5F5" @click="onBack">
        <v-icon left> mdi-arrow-left </v-icon>{{ back }}
      </v-btn>
      <v-toolbar-title
        style="margin: 0 auto; height: 8vh; line-height: 55px"
        >{{ title }}</v-toolbar-title
      >
    </v-toolbar>

    <v-tabs
      vertical
      class="tabs"
      fixed-tabs
      v-model="active"
      slider-color="white"
    >
      <v-tab class="tab" v-for="(item, index) in teacherInfo" :key="index">
        <v-avatar size="50px">
          <img src="../../assets/en.jpg" />
        </v-avatar>
        <div style="margin-top: 2vh">{{ item.name }}</div>
      </v-tab>

      <v-tab-item
        class="items"
        v-for="(item, index) in teacherInfo"
        :key="index"
      >
        <div v-for="(general, n) in generalList" :key="n">
          <div
            v-for="(detail, m) in general.label"
            :key="m"
            :style="{
              backgroundColor: bgColor(index, n, m),
            }"
          >
            <v-radio-group v-model="generalList[n].label[m].score">
              <div>
                {{ detail.labelName }}
              </div>
              <v-radio :label="verySatisfied" :value="10"></v-radio>
              <v-radio :label="satisfied" :value="8"></v-radio>
              <v-radio :label="ordinary" :value="5"></v-radio>
              <v-radio :label="dissatisfied" :value="3"></v-radio>
              <v-radio :label="veryDissatisfied" :value="1"></v-radio>
            </v-radio-group>
          </div>
        </div>
        <v-btn color="primary" @click="onSubmit" v-if="active == num - 1" :loading='loading'>
          {{ submit }}
        </v-btn>
      </v-tab-item>
    </v-tabs>
    <v-dialog v-model="dialog_back" width="500">
      <v-card>
        <v-card-title class="text-h6 grey lighten-2">
          您当前尚有未评价或提交的类别，退出后将不进行保存，您确定退出吗？
        </v-card-title>
        <v-divider></v-divider>
        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn color="primary" text @click="dialog_back = false">
            取消
          </v-btn>
          <v-btn color="primary" text @click="back_confirm"> 确定 </v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
    <v-snackbar v-model="alert_success" centered>提交成功</v-snackbar>
    <v-snackbar v-model="alert_faild" centered>提交失败，请重试</v-snackbar>
    <v-snackbar v-model="alert_submitted" centered
      >你有尚未评价的细则</v-snackbar
    >
  </div>
</template>
<script>
import vueI18n from "../../plugins/vue-i18n";
import { instance } from "../../api/request";
import { getToken } from "../../utils/getToken";
export default {
  data() {
    return {
      active: 0,
      generalList: [],
      scoreList: [],
      alert_submitted: false,
      alert_success: false,
      alert_faild: false,
      dialog_back: false,
      dialog_unsubmit: false,
      unevaluated: [],
      title: null,
      num: null,
      bgc: "rgba(255, 0, 0, 0.1)",
      bgc_1: "#fff",
      loading:false,
    };
  },
  mounted() {
    //保存当前选中老师状态
    if (this.active_save) {
      this.active = parseInt(this.active_save);
    }
  },
  methods: {
    onBack() {
      this.dialog_back = true;
    },
    back_confirm() {
      this.dialog_back = false;
      this.$store.state.submit.result = [];
      this.$router.go(-1);
    },
    //实现状态切换功能
    //首先判断该大类是否已评
    onSubmit() {
      this.unevaluated = [];
      this.loading=true
      const result = this.$store.state.submit.result;
      let flag = true;
      result.forEach((item, index_tea) => {
        if (item.evaluation) {
          item.evaluation.forEach((items, index_gen) => {
            items.label.forEach((e, index_det) => {
              if (e.score == null || !e.score) {
                this.unevaluated.push(
                  index_tea.toString() +
                    index_gen.toString() +
                    index_det.toString()
                );
                flag = false;
                this.alert_submitted = true;
                setTimeout(() => {
                  this.alert_submitted = false;
                }, 1000);
                 this.loading=false;
              }
            });
          });
        } else {
          flag = false;
          this.alert_submitted = true;
          setTimeout(() => {
            this.alert_submitted = false;
          }, 1000);
        }
      });
      if (flag) {
        let { evaluation, source, student, result } = this.$store.state.submit;
        const submit = { evaluation, source, student, result };
        instance({
          url: "/assessment/save",
          method: "post",
          headers: {
            //请求头设置为表单提交的请求头
            "Content-Type": "application/json",
            token: getToken(),
          },
          data: JSON.stringify(submit),
        }).then((res) => {
          if (res.data.status == 200) {
            this.$store.state.submit.result = [];
            this.$router.push("/main/course");
            this.alert_success = true;
            setTimeout(() => {
              this.alert_success = false;
            }, 1000);
          } else if (res.data.status == 400) {
            this.alert_faild = true;
            setTimeout(() => {
              this.alert_faild = false;
            }, 1000);
          }
          this.loading=false;
        });
      }
    },
  },
  computed: {
    locale() {
      return vueI18n.locale;
    },
    teacherInfo() {
      return JSON.parse(this.$route.query.teacherInfo);
    },
    engclass() {
      return this.$route.query.engclass;
    },
    chineseclass() {
      return this.$route.query.chineseclass;
    },
    //保存当前选中老师状态
    active_save() {
      return this.$route.query.active_save;
    },
    back() {
      return vueI18n.t("lang.back");
    },
    submit() {
      return vueI18n.t("lang.submit");
    },
    verySatisfied() {
      return vueI18n.t("lang.verySatisfied");
    },
    satisfied() {
      return vueI18n.t("lang.satisfied");
    },
    ordinary() {
      return vueI18n.t("lang.ordinary");
    },
    dissatisfied() {
      return vueI18n.t("lang.dissatisfied");
    },
    veryDissatisfied() {
      return vueI18n.t("lang.veryDissatisfied");
    },
    bgColor() {
      return function (index, n, m) {
        if (
          this.unevaluated.some((item) => {
            return index.toString() + n.toString() + m.toString() == item;
          })
        ) {
          return this.bgc;
        } else {
          return this.bgc_1;
        }
      };
    },
  },
  watch: {
    locale: {
      immediate: true,
      handler() {
        this.num = this.teacherInfo.length;
        if (this.locale == "zh") {
          this.title = this.chineseclass;
        } else {
          this.title = this.engclass;
        }
      },
    },
    active: {
      immediate: true,
      handler() {
        //初次渲染时，给result赋值
        const result = this.$store.state.submit.result;
        if (result.length == 0) {
          this.$store.commit("getTeacherInfo", this.teacherInfo);
        }
        //非首次渲染时，数据由vuex获取
        const result_after = this.$store.state.submit.result;
        if (result_after[this.active].evaluation == undefined) {
          const teacherId = this.teacherInfo[this.active].teacherId;
          instance({
            url: "/category/getByTeacher/" + teacherId,
            method: "get",
            headers: {
              //请求头设置为表单提交的请求头
              "Content-Type": "application/json",
              token: getToken(),
            },
          }).then((res) => {
            if (res) {
              if (res.data.status == 400) {
                this.$toast({
                  message: "身份过期，请重新登录",
                  position: "top",
                });
                this.$router.push("/login");
              } else if (res.data.status == 200) {
                //获取教师对应评价列表
                let generalList = res.data.data.result;

                const generalList_after = generalList.map((item) => {
                  let obj = {};
                  let { id, label, type } = item;
                  obj = { id, label, type };
                  //截取英文字符串
                  if (item.cateNameAlias.length <= 35) {
                    obj.cateNameAlias = item.cateNameAlias;
                  } else {
                    obj.cateNameAlias = item.cateNameAlias.slice(0, 35) + "...";
                  }
                  //截取中文字符串
                  if (item.cateName.length <= 14) {
                    obj.cateName = item.cateName;
                  } else {
                    obj.cateName = item.cateName.slice(0, 14) + "...";
                  }
                  return obj;
                });
                this.generalList = generalList_after;
                //初始化以及切换教师时进行vuex的初始赋值
                this.$store.state.submit.result[this.active].evaluation =
                  this.generalList;
              }
            }
          });
        } else {
          this.generalList =
            this.$store.state.submit.result[this.active].evaluation;
        }
      },
    },
    generalList: {
      immediate: false,
      deep: true,
      handler() {
        this.$store.state.submit.result[this.active].evaluation =
          this.generalList;
      },
    },
  },
};
</script>
<style scoped>
.box {
  width: 100%;
}
.tabs {
  height: 92.5vh;
}
.tab {
  display: flex;
  flex-direction: column;
  min-width: 18vw;
}
.v-tab {
  text-transform: none;
}
.back {
  width: 5vw;
  color: white;
  margin-bottom: 1vh;
}
.items {
  padding-left: 1vw;
  height: 92.5vh;
  overflow: auto;
}
::-webkit-scrollbar {
  display: none;
}
</style>
